<!-- 车辆详情 -->
<template>
  <div class="dashboard-container vehicle-detail">
    <el-card>
      <el-tabs @tab-click="active">
        <el-tab-pane
          label="基本信息"
        >
          <!-- 基本信息表格 -->
          <el-form
            ref="ruleForm"
            class="form"
            label-width="100px"
            :model="ruleForm"
            :rules="rules"
            :class="{ 'disabled-input': disabled }"
          >
            <el-form-item
              label="车辆编号:"
              prop="truckTypeId"
            >
              <el-input
                v-model="ruleForm.truckTypeId"
                placeholder="请输入车辆编号"
                :disabled="disabled"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="车辆号码:"
              style="margin-left: 50px;"
              prop="licensePlate"
            >
              <el-input
                v-model="ruleForm.licensePlate"
                placeholder="请输入车辆号码"
                :disabled="disabled"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="车辆名称:"
              style="margin-left: 50px;"
              prop="truckTypeName"
            >
              <el-select
                v-model="ruleForm.truckTypeName"
                placeholder="请选择"
                :disabled="disabled"
              >

                <el-option
                  v-for="item in truckType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
                <!-- 下拉框区域 -->
              </el-select>

            </el-form-item>
            <el-form-item
              label="车辆体积:"
              prop="allowableVolume"
            >
              <el-input
                v-model="ruleForm.allowableVolume"
                placeholder="请输入车辆体积"
                :disabled="disabled"
              >
                <span
                  v-if="!disabled"
                  slot="suffix"
                  style=" color: #20232a;font-weight: 400; font-size: 14px;font-family: PingFangSC, PingFangSC-Regular;margin-right: 14px;line-height: 40px;"
                >m³</span>
              </el-input>
            </el-form-item>
            <el-form-item
              prop="allowableLoad"
              label="车辆载重:"
              style="margin-left: 50px;"
            >

              <el-input
                v-model="ruleForm.allowableLoad"
                placeholder="请输入车辆载重"
                :disabled="disabled"
              >
                <span
                  v-if="!disabled"
                  slot="suffix"
                  style=" color: #20232a;font-weight: 400; font-size: 14px;font-family: PingFangSC, PingFangSC-Regular;margin-right: 14px;line-height: 40px;"
                >吨</span></el-input>
            </el-form-item>
            <el-form-item
              prop="deviceGpsId"
              label="GPSID:"
              style="margin-left: 50px;"
            >
              <el-input
                v-model="ruleForm.deviceGpsId"
                placeholder="请输入GPS ID号"
                :disabled="disabled"
              ></el-input>
            </el-form-item>
            <!-- 上传图片 -->
            <el-form-item
              label="图片信息"
              prop="picture"
            >
              <!-- 上传图片 -->
              <el-upload
                action="ruleForm.picture"
                list-type="picture-card"
                :auto-upload="false"
                :file-list="fileList"
              >
                <i
                  slot="default"
                  class="el-icon-plus"
                ></i>
                <!-- 上传后显示图片 -->
                <div
                  slot="file"
                  slot-scope="{ file }"
                >
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                  />
                  <!-- 图标功能 -->
                  <span class="el-upload-list__item-actions">
                    <!-- 放大镜 -->
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <!-- 删除 -->
                    <span
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img
                  width="100%"
                  :src="dialogImageUrl"
                  alt=""
                >
              </el-dialog>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane
          label="行驶证信息"
        >
          <el-form
            ref="license"
            label-width="120px"
            :model="license"
            :rules="rulesLicense"
            :class="{ 'disabled-input': disabled }"
          >
            <div class="formtow">
              <el-form-item
                label="行驶证号码:"
                prop="transportCertificateNumber"
              >
                <el-input
                  v-model="license.transportCertificateNumber"
                  placeholder="请输入行驶证号码"
                  :disabled="disabledLicense"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="发动机号码:"
                prop="engineNumber"
              >
                <el-input
                  v-model="license.engineNumber"
                  placeholder="请输入发动机号码"
                  :disabled="disabledLicense"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="注册时间:"
                prop="registrationDate"
              >
                <div class="block">
                  <span class="demonstration"></span>
                  <el-date-picker
                    v-model="license.registrationDate"
                    type="date"
                    placeholder="请选择注册时间"
                    :disabled="disabledLicense"
                  >
                  </el-date-picker>
                </div>
              </el-form-item>
              <el-form-item
                label="强制报废日期:"
                prop="mandatoryScrap"
              >
                <div class="block">
                  <span class="demonstration"></span>
                  <el-date-picker
                    v-model="license.mandatoryScrap"
                    type="date"
                    placeholder="请选择强制报废日期"
                    :disabled="disabledLicense"
                  >
                  </el-date-picker>
                </div>
              </el-form-item>
              <el-form-item
                label="整备质量:"
                prop="overallQuality"
              >
                <el-input
                  v-model="license.overallQuality"
                  placeholder="请输入整备质量"
                  :disabled="disabled"
                >
                  <span
                    v-if="!disabledLicense"
                    slot="suffix"
                    style=" color: #20232a;font-weight: 400; font-size: 14px;font-family: PingFangSC, PingFangSC-Regular;margin-right: 14px;line-height: 40px;"
                  >吨</span>
                </el-input>
              </el-form-item>
              <el-form-item
                label="检验有效期:"
                prop="expirationDate"
              >
                <div class="block">
                  <span class="demonstration"></span>
                  <el-date-picker
                    v-model="license.expirationDate"
                    type="date"
                    placeholder="请选择检验有效期"
                    :disabled="disabledLicense"
                  >
                  </el-date-picker>
                </div>
              </el-form-item>
              <el-form-item
                prop="allowableWeight"
                label="核定载质量:"
              >

                <el-input
                  v-model="license.allowableWeight"
                  placeholder="请输入核定载质量"
                  :disabled="disabledLicense"
                >
                  <span
                    v-if="!disabled"
                    slot="suffix"
                    style=" color: #20232a;font-weight: 400; font-size: 14px;font-family: PingFangSC, PingFangSC-Regular;margin-right: 14px;line-height: 40px;"
                  >吨</span>
                </el-input>
              </el-form-item>
              <el-form-item
                prop="validityPeriod"
                label="有效期:"
                style="margin-left: 50px;"
              >
                <div class="block">
                  <span class="demonstration"></span>
                  <el-date-picker
                    v-model="license.validityPeriod"
                    type="date"
                    placeholder="请选择有效期"
                    :disabled="disabledLicense"
                  >
                  </el-date-picker>
                </div>
              </el-form-item>
              <!-- 上传图片 -->
              <el-form-item
                label="图片信息"
                prop="picture"
              >
                <!-- 上传图片 -->
                <el-upload
                  :auto-upload="false"
                  action="#"
                  list-type="picture-card"
                  :file-list="fileListtow"
                >
                  <i
                    slot="default"
                    class="el-icon-plus"
                  ></i>
                  <!-- 上传后显示图片 -->
                  <div
                    slot="file"
                    slot-scope="{ file }"
                  >
                    <img
                      class="el-upload-list__item-thumbnail"
                      :src="file.url"
                      alt=""
                    />
                    <!-- 图标功能 -->
                    <span class="el-upload-list__item-actions">
                      <!-- 放大镜 -->
                      <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                      >
                        <i class="el-icon-zoom-in"></i>
                      </span>
                      <!-- 删除 -->
                      <span
                        class="el-upload-list__item-delete"
                        @click="handleLicense(file)"
                      >
                        <i class="el-icon-delete"></i>
                      </span>
                    </span>
                  </div>
                </el-upload>

                <el-dialog :visible.sync="dialogVisible">
                  <img
                    width="100%"
                    :src="dialogImageUrl"
                    alt=""
                  >
                </el-dialog>
                <p>注：图片大小不超过5M；仅能上传 PNG JPEG JPG类型图片；建议上传400*300尺寸的图片；最多上传2张</p>
              </el-form-item>

            </div>

          </el-form>
        </el-tab-pane>
      </el-tabs>
      <footer class="add-footer">
        <div class="btn-container">
          <el-button
            v-if="disabled"
            type="warning"
            @click="edit"
          >编辑</el-button>
          <el-button
            v-if="!disabled"
            type="warning"
            @click="add"
          >保存</el-button>
          <el-button
            v-if="!disabled"
            type="warning"
            plain
            @click="off"
          >取消</el-button>
        </div>
      </footer>
    </el-card>
  </div>
</template>
<script>
import { truckDetailsAPI, truckTypeAPI, truckDeitAPI, getLicenseAPI, addLicenseAPI } from '@/api/vehicle'
export default {
  name: 'VehicleDetail',
  data() {
    return {
      // 行驶证信息
      license: {
        id: '',
        outsideDimensions: null, // 数据为null
        transportCertificateNumber: null, // 行驶证号码
        engineNumber: null, // 发动机号码
        registrationDate: null, // 注册时间
        mandatoryScrap: null, // 强制报废日期
        overallQuality: null, // 整备质量
        expirationDate: null, // 检验有效期
        allowableWeight: null, // 核定载质量
        validityPeriod: null // 有效期
      },
      // 行驶证信息兜底校验
      rulesLicense: {
        transportCertificateNumber: [
          { required: true, message: '行驶号码不能为空', trigger: 'change' }
        ],
        engineNumber: [
          { required: true, message: '发动机号码不能为空', trigger: 'change' }
        ],
        registrationDate: [
          { required: true, message: '注册时间不能为空', trigger: 'change' }
        ],
        mandatoryScrap: [
          { required: true, message: '强制报废日期不能为空', trigger: 'change' }
        ],
        overallQuality: [
          { required: true, message: '整备质量不能为空', trigger: 'change' }
        ],
        expirationDate: [
          { required: true, message: '检验有效期不能为空', trigger: 'change' }
        ],
        allowableWeight: [
          { required: true, message: '核定载质量不能为空', trigger: 'change' }
        ],
        validityPeriod: [
          { required: true, message: '有效期不能为空', trigger: 'change' }
        ]
      },
      // 表单双向绑定
      ruleForm: {
        truckTypeId: '', // (车辆编号)车辆类型Id
        licensePlate: '', // 车牌号码
        truckTypeName: '', // 车型名称(车辆类型名称)
        allowableVolume: '', // 车辆体积
        allowableLoad: '', // 车辆载重
        deviceGpsId: '', // GPS ID
        picture: '' // 图片信息
      },
      truckType: [], // 车辆类型
      // 兜底校验
      rules: {
        truckTypeId: [
          { required: true, message: '车辆类型Id不能为空', trigger: 'change' }
        ],
        licensePlate: [
          { required: true, message: '车牌号码不能为空', trigger: 'change' }
        ],
        truckTypeName: [
          { required: true, message: ' 车型名称不能为空', trigger: 'change' }
        ],
        allowableVolume: [
          { required: true, message: '车辆体积不能为空', trigger: 'change' }
        ],
        allowableLoad: [
          { required: true, message: '车辆载重不能为空', trigger: 'change' }
        ],
        deviceGpsId: [
          { required: true, message: 'GPS ID不能为空', trigger: 'change' }
        ]
      },
      disabled: true, // 禁用控制
      dialogImageUrl: '',
      dialogVisible: false, // 控制放大镜图片的显示和隐藏
      fileList: [], // 存回显图片信息
      activeStep: 1, // 按钮步数
      fileListtow: [], // 行驶证信息图片
      disabledLicense: false
      // active: true
    }
  },
  computed: {

    id() {
      return this.$route.query.id
    }
  },
  created() {
    this.truckDetails()
    this.truckTypeList()
    this.getLicense()
  },
  methods: {
    update(data) {
      console.log('图片地址', data)
    },
    // 获取车辆行驶证详情
    async getLicense() {
      const { data } = await getLicenseAPI(this.id)
      console.log('车辆行驶证详情', data)
      this.license = data
      // 把图片以,分隔
      const imgLicense = data.picture.split(',')
      console.log(imgLicense)

      this.license.id = data.id

      // 回显图片
      imgLicense.forEach(item => {
        this.fileListtow.push({
          url: item
        })
      })
    },
    // 获取车辆类型下拉框
    async truckTypeList() {
      const { data } = await truckTypeAPI()
      // console.log('车辆类型下拉框', data)
      this.truckType = data
    },
    // 删除车辆类型图片
    handleLicense(file) {
      const index = this.fileListtow.indexOf(file)
      if (index !== -1) {
        this.fileListtow.splice(index, 1)
      }
      this.ruleForm.picture = this.fileListtow.map((item) => item.url).join(',')
    },
    // 编辑
    edit() {
      this.disabled = false
    },
    active() {
      this.disabled = false
    },
    // 保存
    async add() {
      if (this.$refs.ruleForm) {
        this.disabled = true
        this.ruleForm.picture = this.fileList.map(item => {
          item.url
        }).join(',')
        console.log('保存页面数据回显', this.ruleForm)
        await truckDeitAPI(this.id, {
          ...this.ruleForm
        })
        this.$message.success('修改成功')
      }
      if (this.$refs.license) {
        this.ruleForm.picture = this.fileList.map(item => {
          item.url
        }).join(',')
        this.disabled = true

        // console.log('license数据', this.license)

        await addLicenseAPI(this.id, {
          ...this.license
        })
        // console.log('111', res)
        this.$message.success('修改成功')
      }
      // this.$router.back()
    },
    // 取消
    off() {
      this.disabled = true
    },
    // 放大镜图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 删除图片
    handleRemove(file) {
      const index = this.fileList.indexOf(file)
      if (index !== -1) {
        this.fileList.splice(index, 1)
      }
      this.ruleForm.picture = this.fileList.map((item) => item.url).join(',')
    },

    // 回显详情数据
    async truckDetails() {
      const { data } = await truckDetailsAPI(this.id)
      this.ruleForm = data
      // 把图片以,分隔
      const img = data.picture.split(',')

      // 回显图片
      img.forEach(item => {
        this.fileList.push({
          url: item
        })
      })
    }
  }

}

</script>

<style lang="scss" scoped>
.active {
  color: #ff643d;
}
</style>

<style lang="scss" scoped>

.custom-upload{
  width: 212px;
    height: 159px;
    border: 1px solid rgb(216, 221, 227);
    border-radius: 4px;
}
.disabled-input {
  ::v-deep .el-input__inner {
    background-color: transparent;
    border-color: transparent;
    color: #20232a;

  }
  ::v-deep .el-input__icon{
  display: none;
}
}
.add-footer {
  position: fixed;
  left: 50%;
  bottom: 200px;
  // width: 100%;
  // padding: 24px 100px;
  // color: #000000d9;
  // font-size: 14px;
  // background: #fff;
}
.formtow {
  width: 1300px;
  height: 200px;
  padding: 16px 26px 30px;
  display: flex;
  flex-wrap: wrap;
  ::v-deep .el-input__inner{
    width: 280px;
  }
}
.form {
  width: 1300px;
  height: 400px;
  padding: 16px 26px 30px;
  display: flex;
  flex-wrap: wrap;
  ::v-deep .el-input__inner{
    width: 251px;
  }
}
.el-card {
  margin: 23px 20px 0px 20px;
  width: 1440px;
  height: 745px;
}
.vehicle-detail {
  ::v-deep .el-container {
    flex-direction: column;
    margin-left: 0px;
  }
  .in {
    height: calc(100vh - 205px);
    // height: 100%;
  }
  .aside-box {
    background: #ffffff;
    border-radius: 4px;
    // width: 150px;
    padding: 24px 37px 24px 37px;
    box-sizing: border-box;

    // min-height: calc(100vh - 50px);
    ::v-deep .el-aside {
      padding-bottom: 14px;
      width: 100% !important;
      display: flex;
      background-color: #ffffff;
      border-bottom: 1px solid #e5e7ec;
      text-align: left;
      font-size: 14px;
      .aside-item {
        // margin-top: 38px;
        cursor: pointer;
        &:first-child {
          margin-right: 53px;
          padding-left: 25px;
        }
      }
      .aside-item.active {
        font-size: 16px;
        font-weight: bold;
        color: #20232a;
        &:after {
          content: '';
          display: block;
          background-color: #e15536;
          height: 3px;
          width: 49px;
          margin: 0 auto;
          position: relative;
          top: 14px;
        }
      }
    }
  }
}
</style>
